<template>
  <div class="container" :style="'min-height: ' + $docHeight + 'px'">
    <div class="timeCont" v-if="showCont && !showTimeOut">
      <div class="bannerCont">
        <img src="/img/banner.png" />
        <!-- <video muted autoplay loop src="/img/banner.mp4"></video> -->
      </div>
      <div class="formCont">
        <div class="formTitle">
          <div>意林订单查询系统</div>
          <div class="addBtn iconfont icon-tianjia" @click="addFn"></div>
        </div>
        <div class="formInput" :key="index" v-for="(item, index) in serchArr">
          <input
            v-model="item.orderNum"
            type="text"
            placeholder="请输入订单号"
          />
          <div
            v-if="index > 0"
            @click="delFn(index)"
            class="delBtn iconfont icon-shanchu"
          ></div>
        </div>
        <div class="saveBtn" @click="serchFn">
          <span class="iconfont icon-sousuo1"></span>
          <span>点击查询</span>
        </div>
        <div class="formTip">
          <div class="formTipFlex">
            <span>点击右侧</span><span class="iconfont icon-tianjia"></span
            ><span>可以绑定多个订单号</span>
          </div>
          <!-- <div>支持的平台有:京东、抖音、拼多多、有赞商城</div> -->
        </div>
      </div>
      <div class="orderList">
        <div class="orderItem" :key="index" v-for="(item, index) in orderArr">
          <div class="orderHead">
            <div class="ERPNum">
              {{ orderArr.length - index }}.快递单号：{{ item.l_id }}
            </div>
            <div
              class="copyFn iconfont icon-fuzhi2"
              @click="copyFn(item)"
            ></div>
          </div>
          <div class="orderMain">
            <div class="orderMainItem">
              <div class="mainName">下单平台：</div>
              <div class="mainVal">{{ item.shop_id }}</div>
            </div>
            <div class="orderMainItem">
              <div class="mainName">线上单号：</div>
              <div class="mainVal">{{ item.so_id }}</div>
            </div>
            <div class="orderMainItem">
              <div class="mainName">发货时间：</div>
              <div class="mainVal">{{ item.send_date }}</div>
            </div>
            <div class="orderMainItem">
              <div class="mainName">快递公司：</div>
              <div class="mainVal">{{ item.logistics_company }}</div>
            </div>
            <div class="orderMainItem">
              <div class="mainName">订单明细：</div>
              <div
                class="mainVal linkText"
                @click="item.showItem = !item.showItem"
              >
                {{ item.showItem ? "收起" : "展开" }}
              </div>
            </div>
            <div class="orderInfo" v-if="item.showItem">
              <div
                class="infoItem"
                :key="index2"
                v-for="(item2, index2) in item.items"
              >
                <div class="tagImg">
                  <!-- <img src="/img/tag.png" /> -->
                  <div class="tagNum">序号：{{ index2 + 1 }}</div>
                </div>
                <div class="infoItems">
                  <!-- <div class="itemsNum">{{ index2+1 }}.</div> -->
                  <div class="mainName">商品编号：</div>
                  <div class="mainVal">{{ item2.sku_id }}</div>
                </div>
                <div class="infoItems">
                  <div class="mainName">购买数量：</div>
                  <div class="mainVal">{{ item2.qty }}</div>
                </div>
                <div class="infoItems">
                  <div class="mainName">商品退款状态：</div>
                  <div class="mainVal">
                    {{ item2.refund_status == "success" ? "成功" : "无" }}
                  </div>
                </div>
                <div class="infoItems">
                  <div class="mainName">子订单号：</div>
                  <div class="mainVal">{{ item2.outer_oi_id }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="endTip" v-if="orderArr.length > 0">到底啦～</div>
    </div>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import {
  showLoadingToast,
  closeToast,
  showFailToast,
  showToast,
  showSuccessToast,
} from "vant";
import getLoad from "@/components/public/getLoad.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import { getOrder } from "@/http/api/public";
export default {
  components: { getTimeOut, getLoad },
  data() {
    return {
      orderNum: "",
      showCont: true,
      showTimeOut: false,
      serchArr: [{ orderNum: "" }],
      orderArr: [],
    };
  },
  props: {},
  setup() {},
  methods: {
    copyFn(item) {
      let oInput = document.createElement("input");
      oInput.value = item.l_id;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      showSuccessToast("复制成功");
      oInput.remove();
    },
    addFn() {
      this.serchArr.push({ orderNum: "" });
    },
    serchFn() {
      this.getData();
      // https://openweb.jushuitan.com/dev-doc?docType=5&docId=25
    },
    delFn(index) {
      this.serchArr.splice(index, 1);
    },
    getData() {
      let so_idArr = [];
      for (let i = 0; i < this.serchArr.length; i++) {
        if (this.serchArr[i].orderNum != "") {
          so_idArr.push(this.serchArr[i].orderNum);
        }
      }
      if (so_idArr.length > 0) {
        let data = {
          so_ids: so_idArr.join(","),
        };
        const toast1 = showLoadingToast({
          message: "加载中...",
          forbidClick: true,
          duration: 60000,
        });
        getOrder(data).then((res) => {
          toast1.close();
          if (res.data.code == 1) {
            let arr = res.data.data;
            for (let i = 0; i < arr.length; i++) {
              arr[i]["showItem"] = false;
            }
            this.orderArr = arr;
          } else {
            showFailToast(res.data.msg);
          }
        });
      } else {
        showFailToast("请输入订单号");
      }
    },
  },
  mounted() {},
  created() {
    // this.getData()
  },
};
</script>

<style scoped lang="less">
.container {
  background-color: #ebfce7;
  padding-bottom: 1rem;
  box-sizing: border-box;
  .bannerCont {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .formCont {
    background-color: #fff;
    width: 92%;
    margin: 0.75rem auto;
    // position: relative;
    // top: -4rem;
    padding: 1rem 4%;
    border-radius: 0.25rem;
    box-sizing: border-box;
    .formTitle {
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .addBtn {
        font-size: 1rem;
      }
    }
    .formInput {
      width: 100%;
      padding: 0.75rem;
      box-sizing: border-box;
      // background-color: #ebebeb;
      border: 2px solid #5aa74e;
      border-radius: 2rem;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      input {
        line-height: 1rem;
        width: 1rem;
        flex: 1;
        border: none;
        outline: none;
        text-align: center;
        background: none;
        color: #5aa74e;
      }
      input::input-placeholder {
        color: #5aa74e;
      }
      .delBtn {
        font-size: 1rem;
        color: #5aa74e;
      }
    }
    .saveBtn {
      width: 100%;
      padding: 0.75rem 0;
      text-align: center;
      background-image: linear-gradient(to right, #aad4a4, #5aa74e);
      color: #fff;
      border-radius: 2rem;
      margin-top: 0.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 1rem;
        margin-right: 0.25rem;
      }
    }
    .formTip {
      font-size: 0.6rem;
      margin-top: 0.75rem;
      color: #666;
      .formTipFlex {
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 0.6rem;
          margin: 0 0.15rem;
        }
      }
      div {
        margin-bottom: 0.25rem;
      }
    }
  }
  .orderList {
    width: 92%;
    margin: 0.75rem auto;
    .orderItem {
      background-color: #fff;
      border-radius: 0.25rem;
      margin-bottom: 0.75rem;
      padding: 0.75rem;
      box-sizing: border-box;
      .orderHead {
        padding: 0.25rem 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        font-weight: bold;
        .copyFn {
          // text-decoration: underline;
          font-weight: normal;
          font-size: 1rem;
        }
      }
      .orderMain {
        margin-top: 0.5rem;
        .orderMainItem {
          display: flex;
          align-items: center;
          margin-bottom: 0.25rem;
          font-size: 0.7rem;
          justify-content: space-between;
          .mainName {
            width: 5rem;
            font-weight: bold;
          }
          .linkText {
            text-decoration: underline;
            color: red;
          }
        }
        .orderInfo {
          width: 100%;
          .infoItem {
            width: 100%;
            background-color: #dffad9;
            border-radius: 0.25rem;
            padding: 0.75rem;
            // padding-top: 2rem;
            box-sizing: border-box;
            margin-top: 0.75rem;
            position: relative;
            .tagImg {
              // position: absolute;
              width: 3.5rem;
              // top: 0.5rem;
              height: 1.2rem;
              border: 1px solid #5aa74e;
              background-color: #fff;
              margin-bottom: 0.5rem;
              border-radius: 0.15rem;
              .tagNum {
                text-align: center;
                line-height: 1.2rem;
                color: #5aa74e;
              }
            }
            .infoItems {
              display: flex;
              margin-bottom: 0.5rem;
              // align-items: center;
              // border: 1px solid red;
              justify-content: space-between;
              position: relative;
              .itemsNum {
                position: absolute;
                left: -0.5rem;
              }
              .mainName {
                width: 5.2rem;
                // text-align: right;
                white-space: nowrap;
                line-height: 1rem;
                // margin-right: 0.25rem;
              }
              .mainVal {
                flex: 1;
                width: 1rem;
                line-height: 1rem;
                word-break: break-all;
              }
            }
          }
        }
      }
    }
  }
  .endTip {
    text-align: center;
    font-size: 0.6rem;
    color: #666;
    margin-top: 1rem;
  }
}
</style>
